<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.min.js"></script>
</head>

<body>
    <button id="btn">发起GET请求</button>
    <table border="1" width="100%">
        <thead>
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>发布时间</th>
                <th>评论数量</th>
                <th>访问数量</th>
                <th>作者</th>
                <th>操作</th>
            </tr>
            
        </thead>
        <tbody class="tbody">

        </tbody>
    </table>
    <script>
        let btn = document.querySelector('#btn');
        let tbody = document.querySelector('.tbody');

        btn.onclick = function () {
            axios({
                url: 'https://cnodejs.org/api/v1/topics',
                params: {
                    page: 1,
                    limit: 10
                },
                method: 'GET'
            }).then(function (res) {
                console.log(res);
                let list = res.data.data;
                let html = '';

                list.forEach(item => {
                    html += `<tr>
                                <td>${item.id}</td>
                                <td>${item.title}</td>
                                <td>${item.create_at}</td>
                                <td>${item.reply_count}</td>
                                <td>${item.visit_count}</td>
                                <td>${item.author.loginname}</td>
                                <td><a target="_blank" href="./detail.html?${item.id}">详情</a></td>
                            </tr>`
                })
                tbody.innerHTML = html;
            })
        }
    </script>
</body>

</html>